<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
div{text-align:center;}
#show{width:300px;margin:200px auto;height:100px;background:#ddd;line-height:100px;text-align:center;font-size:30px;}
	</style>
	<script type="text/javascript">

onload = function() {

	//获得显示div
	var oShow = document.getElementById('show');
	//定义初试时间
	var m = 0;
	var s = 0;
	var ms = 0;

	//获得按钮
	var bBtn = document.getElementById('begin');
	var sBtn = document.getElementById('stop');
	var rBtn = document.getElementById('reset');


	bBtn.onclick = function() {
		if (oShow.timeId) {
			return true;
		}
		oShow.timeId = setInterval(function(){
								
								if (++ms == 100) {
									ms = 0;
									s++;
								}
								if (s == 60) {
									s = 0;
									m++;
								}
								oShow.innerHTML = dealNum(m)+':'+dealNum(s)+'.'+dealNum(ms);
						},10);
	}

	sBtn.onclick = function() {
		clearInterval(oShow.timeId);
		oShow.timeId = null;
	}

	rBtn.onclick = function() {
		clearInterval(oShow.timeId);
		oShow.timeId = null;
		m=0;
		s=0;
		ms=0;
		oShow.innerHTML = '00:00.00';
	}
	


}


function dealNum(n) {
	str = '';
	if (n < 10) {
		str += '0';
	}
	return str += n;
}


	</script>
</head>
<body>
	<div id="show">00:00.00</div>
	<div>
		<button id="begin">开始</button>
		<button id="stop">暂停</button>
		<button id="reset">重置</button>
	</div>
</body>
</html>